window.addEventListener('load',function(){
    //1.鼠标处于focus上方时，显示左右箭头和小圆圈;鼠标移除focus上方时，隐藏左右箭头和小圆圈
    var arror_l = document.querySelector(".arror_l")
    var arror_w = document.querySelector(".arror_r")
    var ol = document.querySelector("ol")
    var focus = document.querySelector(".focus")
    focus.addEventListener('mouseenter',function(){
        arror_l.style.display = 'block'
        arror_w.style.display = 'block'
        //鼠标放入的时候清除timer定时器
        clearInterval(timer)
        timer = null
    })
    
    focus.addEventListener('mouseleave',function(){
        arror_l.style.display = 'none'
        arror_w.style.display = 'none'
        timer = setInterval(function(){
            arror_w.click()
        },2000)
    })
    //2.动态生成小圆圈
    var ul = focus.querySelector('ul')
    var focusWidth = focus.offsetWidth
    //5.点击右侧按钮 图片滚动一张
    var num = 0;
    //circle变量控制小圆圈的播放
    var circle = 0;
    for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
        li.setAttribute('index',i)
        ol.appendChild(li)
        //3.点击小圆圈 给当前圆圈设置current 其他清除掉class
        li.addEventListener('click',function(){
            for(var i=0;i<ol.children.length;i++){
                ol.children[i].className = ''
            }
            this.className = 'current'
            //4.点击圆圈 移动ul,ul的移动距离为圆圈的下标*图片的宽度
            var index = this.getAttribute('index')
            num = index
            circle = index
            animate(ul,- index * focusWidth)
        })
    }
    //ol 的第一个孩子className 设置为current
    ol.children[0].className = "current"
    //克隆ul li的第一张图片放入到ul 的最后面
    var firstClone = ul.children[0].cloneNode(true)
    ul.appendChild(firstClone)
    //6.右侧按钮点击 跳到下一个图片
    //节流阀：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
    //核心思路：利用回调函数，来设置一个变量，锁住函数和解锁函数
    var flag = true
    arror_w.addEventListener('click',function(){
        //6.如果当前刷到最后一张图片  需要重新回到第一张图片
        if(flag){
            flag = false
            if(num == ul.children.length-1){
                ul.style.left = 0
                num = 0;
            }
            num++;
            animate(ul,-num*focusWidth,function(){
                flag = true
            })
            circle++;
            if(circle == ol.children.length ){
                circle = 0;
            }
            //派他思想 清除所有其他小圆圈的样式 然后对当前circle下表的小圆圈设置className
            for(var i = 0;i<ol.children.length;i++){
                ol.children[i].className = ''
            }
            ol.children[circle].className = 'current'
        }
    })
    //7.左侧按钮点击 跳到下一个图片
    arror_l.addEventListener('click',function(){
        //6.如果当前刷到第一张图片  需要跳到最后一张图片
        if(flag){
            flag = false
            if(num == 0){
                num = ul.children.length-1;
                ul.style.left = - num*focusWidth+'px'
            }
            num--;
            animate(ul,- num*focusWidth,function(){
                flag = true
            })
            circle--;
            if(circle < 0 ){
                circle = ol.children.length - 1;
            }
            //派他思想 清除所有其他小圆圈的样式 然后对当前circle下表的小圆圈设置className
            for(var i = 0;i<ol.children.length;i++){
                ol.children[i].className = ''
            }
            ol.children[circle].className = 'current'
        }
    })
    //10.设置自动播放功能
    var timer = setInterval(function(){
        arror_w.click()
    },2000)
})